<!DOCTYPE html>
<html lang=zh>
<head>
  <meta charset="utf-8">
  
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no,email=no,adress=no">
  <!-- Color theme for statusbar -->
  <meta name="theme-color" content="#000000" />
  <!-- 强制页面在当前窗口以独立页面显示,防止别人在框架里调用页面 -->
  <meta http-equiv="window-target" content="_top" />
  <!-- 谷歌收录 -->
  <meta name="google-site-verification" content="-5hl8eC4wfapGZhZouwMVUcKG0iaynijVRJbqVlzXm4" />
  
  
  <title>Markdown中图片的高级用法 | 鴻塵</title>
  <meta name="description" content="文章说明文章作者：鴻塵文章链接：https:&#x2F;&#x2F;hwame.top&#x2F;20220228&#x2F;awesome-images-in-markdown.html原文作者：吾乃木易先生原文链接：https:&#x2F;&#x2F;www.52pojie.cn&#x2F;thread-1522362-1-1.html参考资料：  庆国诞72周年，分享我帖子中的链接小卡片是怎么做的 ~2.6貌似有问题，style变成前内容了~ 【已更正】 ~">
<meta property="og:type" content="article">
<meta property="og:title" content="Markdown中图片的高级用法">
<meta property="og:url" content="https://hwame.top/20220228/awesome-images-in-markdown.html">
<meta property="og:site_name" content="鴻塵">
<meta property="og:description" content="文章说明文章作者：鴻塵文章链接：https:&#x2F;&#x2F;hwame.top&#x2F;20220228&#x2F;awesome-images-in-markdown.html原文作者：吾乃木易先生原文链接：https:&#x2F;&#x2F;www.52pojie.cn&#x2F;thread-1522362-1-1.html参考资料：  庆国诞72周年，分享我帖子中的链接小卡片是怎么做的 ~2.6貌似有问题，style变成前内容了~ 【已更正】 ~">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://img.shields.io/badge/%5B其他%5DMarkdown从入门到精通-楼主：一只小凡凡-1?colorA=fff&amp;colorB=fff&amp;style=for-the-badge&amp;logo=">
<meta property="og:image" content="https://img.shields.io/badge/【帮助文档】Markdown插件使用说明-楼主：Hmily-1?colorA=fff&amp;colorB=fff&amp;style=for-the-badge&amp;logo=">
<meta property="og:image" content="https://img.shields.io/badge/Shields.io-吾乃木易先生?color=222&amp;logo=shieldsdotio">
<meta property="og:image" content="https://img.shields.io/badge/吾爱破解-吾乃木易先生?color=ff69b4">
<meta property="og:image" content="https://img.shields.io/badge/绿得发光-吾乃木易先生">
<meta property="og:image" content="https://img.shields.io/badge/52PoJie-吾爱破解-fff">
<meta property="og:image" content="https://img.shields.io/badge/Simple%20Icons-吾乃木易先生?color=222&amp;logo=simpleicons">
<meta property="og:image" content="https://img.shields.io/badge/QQ-吾乃木易先生?color=4ab7f5&amp;logo=tencentqq">
<meta property="og:image" content="https://img.shields.io/badge/macOS-10.13+-367aff?logo=apple">
<meta property="og:image" content="https://img.shields.io/badge/WeChat-吾乃木易先生?color=fff&amp;logo=wechat">
<meta property="og:image" content="https://img.shields.io/badge/AliPay-吾乃木易先生?color=fff&amp;logo=alipay">
<meta property="og:image" content="https://img.shields.io/badge/QQ-吾乃木易先生?color=fff&amp;logo=tencentqq&amp;logoColor=4ab7f5">
<meta property="og:image" content="https://img.shields.io/badge/macOS-10.13+-367aff?logo=apple&amp;logoColor=f9d694">
<meta property="og:image" content="https://img.shields.io/badge/吾乃木易先生-吾乃木易?color=fff&amp;logo=">
<meta property="og:image" content="https://img.shields.io/badge/吾爱破解-吾乃木易先生-吾乃木易?color=fff&amp;logo=">
<meta property="og:image" content="https://img.shields.io/badge/macOS-吾乃木易先生?label=AppStore&amp;colorA=fff&amp;colorB=367aff&amp;logo=appstore">
<meta property="og:image" content="https://img.shields.io/badge/吾爱破解-吾乃木易先生?color=fff&amp;logo=">
<meta property="og:image" content="https://img.shields.io/badge/style=plastic-吾乃木易先生?label=Git&amp;colorA=fff&amp;colorB=f14d28&amp;logo=git">
<meta property="og:image" content="https://img.shields.io/badge/style%20=%20flat-吾乃木易先生?label=Git&amp;colorA=fff&amp;colorB=f14d28&amp;logo=git&amp;style=flat">
<meta property="og:image" content="https://img.shields.io/badge/style%20=%20flat--square-吾乃木易先生?label=Git&amp;colorA=fff&amp;colorB=f14d28&amp;logo=git&amp;style=flat-square">
<meta property="og:image" content="https://img.shields.io/badge/style%20=%20for--the--badge-吾乃木易先生?label=Git&amp;colorA=fff&amp;colorB=f14d28&amp;logo=git&amp;style=for-the-badge">
<meta property="og:image" content="https://img.shields.io/badge/style%20=%20social-吾乃木易先生?label=Git&amp;colorA=fff&amp;colorB=f14d28&amp;logo=git&amp;style=social">
<meta property="og:image" content="https://img.shields.io/github/watchers/torvalds/linux?style=social&amp;label=Watch">
<meta property="og:image" content="https://img.shields.io/github/stars/torvalds/linux?style=social&amp;label=star">
<meta property="og:image" content="https://img.shields.io/github/forks/torvalds/linux?style=social&amp;label=Fork">
<meta property="og:image" content="https://img.shields.io/badge/macOS-吾乃木易先生?label=App%20Store&amp;colorA=fff&amp;colorB=367aff&amp;logo=appstore">
<meta property="og:image" content="https://img.shields.io/badge/-everything--is--local-吾乃木易先生?label=git&amp;colorA=fff&amp;colorB=f14d28&amp;logo=git">
<meta property="og:image" content="https://img.shields.io/badge/热烈庆祝中华人民共和国成立72周年！-吾乃木易先生?color=fff&amp;logo=&amp;style=for-the-badge">
<meta property="article:published_time" content="2022-02-28T15:27:50.000Z">
<meta property="article:modified_time" content="2022-03-02T15:28:27.000Z">
<meta property="article:author" content="鴻塵">
<meta property="article:tag" content="miscellanea">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://img.shields.io/badge/%5B其他%5DMarkdown从入门到精通-楼主：一只小凡凡-1?colorA=fff&amp;colorB=fff&amp;style=for-the-badge&amp;logo=">
  <!-- Canonical links -->
  <link rel="canonical" href="https://hwame.top/20220228/awesome-images-in-markdown.html">
  
    <link rel="alternate" href="true" title="鴻塵" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png" type="image/x-icon">
  
  
<link rel="stylesheet" href="/css/style.css">

  
    <link href="//cdn.jsdelivr.net/npm/katex@0.9.0/dist/katex.min.css" rel="stylesheet">
  
  
  
    <link href="//cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css" rel="stylesheet">
  
  
<meta name="generator" content="Hexo 5.4.2"></head>


<script src="https://cdn.jsdelivr.net/gh/bobcn/hexo_resize_image.js@master/hexo_resize_image.js"></script>
<body class="main-center theme-purple" itemscope itemtype="http://schema.org/WebPage">
  <header class="header" itemscope itemtype="http://schema.org/WPHeader">
  <div class="slimContent">
    <div class="navbar-header">
      
      
      <div class="profile-block text-center">
        <a id="avatar" href="https://hwame.top" target="_blank">
          <img class="img-circle img-rotate" src="https://cdn.jsdelivr.net/gh/hwame/pics@main/avatar.jpg" width="200" height="200">
        </a>
        <h2 id="name" class="hidden-xs hidden-sm">鴻塵</h2>
        <h3 id="title" class="hidden-xs hidden-sm hidden-md">Pythoner, Data Analyst</h3>
        <small id="location" class="text-muted hidden-xs hidden-sm"><i class="icon icon-map-marker"></i> 湖北-武汉</small>
      </div>
      
      <div class="search" id="search-form-wrap">

    <form class="search-form sidebar-form">
        <div class="input-group">
            <input type="text" class="search-form-input form-control" placeholder="搜索" />
            <span class="input-group-btn">
                <button type="submit" class="search-form-submit btn btn-flat" onclick="return false;"><i class="icon icon-search"></i></button>
            </span>
        </div>
    </form>
    <div class="ins-search">
  <div class="ins-search-mask"></div>
  <div class="ins-search-container">
    <div class="ins-input-wrapper">
      <input type="text" class="ins-search-input" placeholder="想要查找什么..." x-webkit-speech />
      <button type="button" class="close ins-close ins-selectable" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    </div>
    <div class="ins-section-wrapper">
      <div class="ins-section-container"></div>
    </div>
  </div>
</div>


</div>
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <nav id="main-navbar" class="collapse navbar-collapse" itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation">
      <ul class="nav navbar-nav main-nav menu-highlight">
        
        
        <li class="menu-item menu-item-home">
          <a href="/.">
            
            <i class="icon icon-home-fill"></i>
            
            <span class="menu-title">首页</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-archives">
          <a href="/archives">
            
            <i class="icon icon-archives-fill"></i>
            
            <span class="menu-title">归档</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-categories">
          <a href="/categories">
            
            <i class="icon icon-folder-open"></i>
            
            <span class="menu-title">分类</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-tags">
          <a href="/tags">
            
            <i class="icon icon-tags"></i>
            
            <span class="menu-title">标签</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-repository">
          <a href="/repository">
            
            <i class="icon icon-project"></i>
            
            <span class="menu-title">资源</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-gallery">
          <a href="/gallery">
            
            <i class="icon icon-delicious"></i>
            
            <span class="menu-title">相册</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-links">
          <a href="/links">
            
            <i class="icon icon-friendship"></i>
            
            <span class="menu-title">友链</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-about">
          <a href="/about">
            
            <i class="icon icon-cup-fill"></i>
            
            <span class="menu-title">关于</span>
          </a>
        </li>
        
      </ul>
      
	
    <ul class="social-links">
    	
        <li><a href="https://github.com/hwame" target="_blank" title="Github" data-toggle=tooltip data-placement=top><i class="icon icon-github"></i></a></li>
        
        <li><a href="https://weibo.com/hwamei" target="_blank" title="Weibo" data-toggle=tooltip data-placement=top><i class="icon icon-weibo"></i></a></li>
        
        <li><a href="https://www.zhihu.com/people/hwame" target="_blank" title="Zhihu" data-toggle=tooltip data-placement=top><i class="icon icon-zhihu"></i></a></li>
        
        <li><a href="https://segmentfault.com/u/hwame" target="_blank" title="Segmentfault" data-toggle=tooltip data-placement=top><i class="icon icon-segmentfault"></i></a></li>
        
        <li><a href="https://gitee.com/hwame" target="_blank" title="Gitee" data-toggle=tooltip data-placement=top><i class="icon icon-gitee"></i></a></li>
        
        <li><a href="/atom.xml" target="_blank" title="Rss" data-toggle=tooltip data-placement=top><i class="icon icon-rss"></i></a></li>
        
    </ul>

    </nav>
  </div>
</header>

  
    <aside class="sidebar" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    
      <div class="widget">
    <h3 class="widget-title"><i style="color:#9400D3" class="icon icon-stackexchange"></i>公告</h3>
    <div class="widget-body">
        <div id="board">
            <div class="content">
                <p>欢迎来到鴻塵的博客!<br>鴻塵的<u><a target="_blank" rel="noopener" href="https://weibo.com/hwamei" style="color:#E541E5;">微博</a></u>主页，鴻塵的<u><a target="_blank" rel="noopener" href="https://github.com/hwame" style="color:#E541E5;">Github</a></u>主页，如果我可以忘记的<u><a target="_blank" rel="noopener" href="https://www.zhihu.com/people/hwame" style="color:#E541E5;">知乎</a></u>主页。</p>
            </div>
        </div>
    </div>
</div>

    
      
  <div class="widget">
    <h3 class="widget-title"><i style="color:#9400D3" class="icon icon-tags"></i>标签云</h3>
    <div class="widget-body tagcloud">
      <a href="/tags/CentOS/" style="font-size: 13px; color: #fff">CentOS</a> <a href="/tags/Go/" style="font-size: 13.2px; color: #fff">Go</a> <a href="/tags/Hexo/" style="font-size: 13.8px; color: #fff">Hexo</a> <a href="/tags/Linux/" style="font-size: 14px; color: #fff">Linux</a> <a href="/tags/Linux%E9%83%A8%E7%BD%B2/" style="font-size: 13px; color: #fff">Linux部署</a> <a href="/tags/MongoDB/" style="font-size: 13.4px; color: #fff">MongoDB</a> <a href="/tags/Spark/" style="font-size: 13px; color: #fff">Spark</a> <a href="/tags/matplotlib/" style="font-size: 13.2px; color: #fff">matplotlib</a> <a href="/tags/miscellanea/" style="font-size: 13.6px; color: #fff">miscellanea</a> <a href="/tags/python/" style="font-size: 14px; color: #fff">python</a> <a href="/tags/shell/" style="font-size: 13.6px; color: #fff">shell</a> <a href="/tags/%E5%A4%A7%E6%95%B0%E6%8D%AE/" style="font-size: 13px; color: #fff">大数据</a> <a href="/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95/" style="font-size: 13px; color: #fff">数据结构与算法</a> <a href="/tags/%E7%88%AC%E8%99%AB/" style="font-size: 13px; color: #fff">爬虫</a>
    </div>
  </div>

<script type="text/javascript">
    var everytag=document.getElementsByClassName("widget-body tagcloud")[0].children;
    for (var i = everytag.length - 1; i >= 0; i--) {
    	var r=Math.floor(Math.random()*255);
        var g=Math.floor(Math.random()*255);
        var b=Math.floor(Math.random()*255);
        everytag[i].style.background = "rgb("+r+","+g+","+b+")";
    }
</script>
    
      
  <div class="widget">
    <h3 class="widget-title"><i style="color:#9400D3" class="icon icon-folder-open"></i>分类</h3>
    <div class="widget-body">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Go/">Go</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Hexo/">Hexo</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Linux/">Linux</a><span class="category-list-count">8</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/MongoDB/">MongoDB</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/miscellanea/">miscellanea</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/python/">python</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95/">数据结构与算法</a><span class="category-list-count">1</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title"><i style="color:#9400D3" class="icon icon-archives-fill"></i>归档</h3>
    <div class="widget-body">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/">2022</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/">2021</a><span class="archive-list-count">9</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/">2020</a><span class="archive-list-count">17</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title"><i style="color:#9400D3" class="icon icon-shu-fill"></i>最新文章</h3>
    <div class="widget-body">
      <ul class="recent-post-list list-unstyled ">
        
          <li>
            
            <div class="item-thumb">
              <a href="/20220327/channel-and-goroutine-in-go.html" class="thumb">
    
    
        <span style="background-image:url(https://cdn.jsdelivr.net/gh/hwame/pics@main/post-pics/icon-golang.jpeg)" alt="Go语言中的通道" class="thumb-image"></span>
    
</a>

            </div>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/Go/">Go</a>
              </p>
              <p class="item-title">
                <a href="/20220327/channel-and-goroutine-in-go.html" class="title">Go语言中的通道</a>
              </p>
              <p class="item-date">
                <time datetime="2022-03-27T11:06:16.000Z" itemprop="datePublished">2022-03-27</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-thumb">
              <a href="/20220323/when-to-use-pointer-in-go.html" class="thumb">
    
    
        <span style="background-image:url(https://cdn.jsdelivr.net/gh/hwame/pics@main/post-pics/icon-golang.jpeg)" alt="Go语言什么时候使用指针" class="thumb-image"></span>
    
</a>

            </div>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/Go/">Go</a>
              </p>
              <p class="item-title">
                <a href="/20220323/when-to-use-pointer-in-go.html" class="title">Go语言什么时候使用指针</a>
              </p>
              <p class="item-date">
                <time datetime="2022-03-23T12:49:57.000Z" itemprop="datePublished">2022-03-23</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-thumb">
              <a href="/20220228/awesome-images-in-markdown.html" class="thumb">
    
    
        <span style="background-image:url(https://cdn.jsdelivr.net/gh/hwame/pics@main/avatar.jpg)" alt="Markdown中图片的高级用法" class="thumb-image"></span>
    
</a>

            </div>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/miscellanea/">miscellanea</a>
              </p>
              <p class="item-title">
                <a href="/20220228/awesome-images-in-markdown.html" class="title">Markdown中图片的高级用法</a>
              </p>
              <p class="item-date">
                <time datetime="2022-02-28T15:27:50.000Z" itemprop="datePublished">2022-02-28</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-thumb">
              <a href="/20220116/shell-regular-expression.html" class="thumb">
    
    
        <span style="background-image:url(https://cdn.jsdelivr.net/gh/hwame/pics@main/post-pics/linux-icon.png)" alt="Shell正则表达式" class="thumb-image"></span>
    
</a>

            </div>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/Linux/">Linux</a>
              </p>
              <p class="item-title">
                <a href="/20220116/shell-regular-expression.html" class="title">Shell正则表达式</a>
              </p>
              <p class="item-date">
                <time datetime="2022-01-16T14:13:05.000Z" itemprop="datePublished">2022-01-16</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-thumb">
              <a href="/20211009/install-linux-on-android-phone.html" class="thumb">
    
    
        <span style="background-image:url(https://cdn.jsdelivr.net/gh/hwame/pics@main/avatar.jpg)" alt="如何在安卓手机上安装Linux发行版" class="thumb-image"></span>
    
</a>

            </div>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/miscellanea/">miscellanea</a>
              </p>
              <p class="item-title">
                <a href="/20211009/install-linux-on-android-phone.html" class="title">如何在安卓手机上安装Linux发行版</a>
              </p>
              <p class="item-date">
                <time datetime="2021-10-09T15:16:37.000Z" itemprop="datePublished">2021-10-09</time>
              </p>
            </div>
          </li>
          
      </ul>
    </div>
  </div>
  

    
  </div>
</aside>

  
  
<aside class="sidebar sidebar-toc collapse" id="collapseToc" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    <nav id="toc" class="article-toc">
      <h3 class="toc-title">文章目录</h3>
      <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#1-%E4%BB%80%E4%B9%88%E6%98%AF%E9%93%BE%E6%8E%A5%E5%B0%8F%E5%8D%A1%E7%89%87"><span class="toc-number">1.</span> <span class="toc-text">1 什么是链接小卡片</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#2-%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95"><span class="toc-number">2.</span> <span class="toc-text">2 使用方法</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#2-1-%E5%8D%95%E5%86%85%E5%AE%B9%E9%93%BE%E6%8E%A5%E5%B0%8F%E5%8D%A1%E7%89%87"><span class="toc-number">2.1.</span> <span class="toc-text">2.1 单内容链接小卡片</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#2-1-1-%E8%AF%AD%E6%B3%95"><span class="toc-number">2.1.1.</span> <span class="toc-text">2.1.1 语法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-1-2-%E7%A4%BA%E4%BE%8B"><span class="toc-number">2.1.2.</span> <span class="toc-text">2.1.2 示例</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-1-3-%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9"><span class="toc-number">2.1.3.</span> <span class="toc-text">2.1.3 注意事项</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-2-%E5%8F%8C%E5%86%85%E5%AE%B9%E9%93%BE%E6%8E%A5%E5%B0%8F%E5%8D%A1%E7%89%87"><span class="toc-number">2.2.</span> <span class="toc-text">2.2 双内容链接小卡片</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#2-2-1-%E8%AF%AD%E6%B3%95"><span class="toc-number">2.2.1.</span> <span class="toc-text">2.2.1 语法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-2-2-%E7%A4%BA%E4%BE%8B"><span class="toc-number">2.2.2.</span> <span class="toc-text">2.2.2 示例</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-2-3-%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9"><span class="toc-number">2.2.3.</span> <span class="toc-text">2.2.3 注意事项</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-3-%E5%9B%BE%E6%A0%87%E9%93%BE%E6%8E%A5%E5%B0%8F%E5%8D%A1%E7%89%87"><span class="toc-number">2.3.</span> <span class="toc-text">2.3 图标链接小卡片</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#2-3-1-%E5%86%85%E7%BD%AE%E5%9B%BE%E6%A0%87%E9%93%BE%E6%8E%A5%E5%B0%8F%E5%8D%A1%E7%89%87"><span class="toc-number">2.3.1.</span> <span class="toc-text">2.3.1 内置图标链接小卡片</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#2-3-1-1-%E8%AF%AD%E6%B3%95"><span class="toc-number">2.3.1.1.</span> <span class="toc-text">2.3.1.1 语法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-3-1-2-%E7%A4%BA%E4%BE%8B"><span class="toc-number">2.3.1.2.</span> <span class="toc-text">2.3.1.2 示例</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-3-1-3-%E4%BF%AE%E6%94%B9%E5%86%85%E7%BD%AE%E5%9B%BE%E6%A0%87%E9%A2%9C%E8%89%B2"><span class="toc-number">2.3.1.3.</span> <span class="toc-text">2.3.1.3 修改内置图标颜色</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#2-3-1-3-1-%E8%AF%AD%E6%B3%95"><span class="toc-number">2.3.1.3.1.</span> <span class="toc-text">2.3.1.3.1 语法</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-3-1-3-2-%E7%A4%BA%E4%BE%8B"><span class="toc-number">2.3.1.3.2.</span> <span class="toc-text">2.3.1.3.2 示例</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-3-2-%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9B%BE%E6%A0%87%E9%93%BE%E6%8E%A5%E5%B0%8F%E5%8D%A1%E7%89%87"><span class="toc-number">2.3.2.</span> <span class="toc-text">2.3.2 自定义图标链接小卡片</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#2-3-2-1-%E8%AF%AD%E6%B3%95"><span class="toc-number">2.3.2.1.</span> <span class="toc-text">2.3.2.1 语法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-3-2-2-%E7%A4%BA%E4%BE%8B"><span class="toc-number">2.3.2.2.</span> <span class="toc-text">2.3.2.2 示例</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-4-%E5%8F%8C%E5%86%85%E5%AE%B9%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A2%9C%E8%89%B2"><span class="toc-number">2.4.</span> <span class="toc-text">2.4 双内容自定义颜色</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#2-4-1-%E8%AF%AD%E6%B3%95"><span class="toc-number">2.4.1.</span> <span class="toc-text">2.4.1 语法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-4-2-%E7%A4%BA%E4%BE%8B"><span class="toc-number">2.4.2.</span> <span class="toc-text">2.4.2 示例</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-4-3-%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9"><span class="toc-number">2.4.3.</span> <span class="toc-text">2.4.3 注意事项</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-5-%E5%A2%9E%E5%8A%A0%E8%B6%85%E9%93%BE%E6%8E%A5"><span class="toc-number">2.5.</span> <span class="toc-text">2.5 增加超链接</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#2-5-1-%E8%AF%AD%E6%B3%95"><span class="toc-number">2.5.1.</span> <span class="toc-text">2.5.1 语法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-5-2-%E7%A4%BA%E4%BE%8B"><span class="toc-number">2.5.2.</span> <span class="toc-text">2.5.2 示例</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-6-%E6%A0%B7%E5%BC%8F"><span class="toc-number">2.6.</span> <span class="toc-text">2.6 样式</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#2-6-1-%E9%BB%98%E8%AE%A4"><span class="toc-number">2.6.1.</span> <span class="toc-text">2.6.1 默认</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-6-2-%E6%89%81%E5%B9%B3%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2"><span class="toc-number">2.6.2.</span> <span class="toc-text">2.6.2 扁平圆角矩形</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#2-6-2-1-%E8%AF%AD%E6%B3%95"><span class="toc-number">2.6.2.1.</span> <span class="toc-text">2.6.2.1 语法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-6-2-2-%E7%A4%BA%E4%BE%8B"><span class="toc-number">2.6.2.2.</span> <span class="toc-text">2.6.2.2 示例</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-6-3-%E6%89%81%E5%B9%B3%E7%9B%B4%E8%A7%92%E7%9F%A9%E5%BD%A2"><span class="toc-number">2.6.3.</span> <span class="toc-text">2.6.3 扁平直角矩形</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#2-6-3-1-%E8%AF%AD%E6%B3%95"><span class="toc-number">2.6.3.1.</span> <span class="toc-text">2.6.3.1 语法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-6-3-2-%E7%A4%BA%E4%BE%8B"><span class="toc-number">2.6.3.2.</span> <span class="toc-text">2.6.3.2 示例</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-6-4-%E5%A4%A7%E6%89%81%E5%B9%B3%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2-%E5%AD%97%E6%AF%8D%E5%85%A8%E5%A4%A7%E5%86%99"><span class="toc-number">2.6.4.</span> <span class="toc-text">2.6.4 大扁平圆角矩形 - 字母全大写</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#2-6-4-1-%E8%AF%AD%E6%B3%95"><span class="toc-number">2.6.4.1.</span> <span class="toc-text">2.6.4.1 语法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-6-4-2-%E7%A4%BA%E4%BE%8B"><span class="toc-number">2.6.4.2.</span> <span class="toc-text">2.6.4.2 示例</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-6-5-GitHub-%E4%BA%A4%E6%B5%81%E6%A0%B7%E5%BC%8F"><span class="toc-number">2.6.5.</span> <span class="toc-text">2.6.5 GitHub 交流样式</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#2-6-5-1-%E8%AF%AD%E6%B3%95"><span class="toc-number">2.6.5.1.</span> <span class="toc-text">2.6.5.1 语法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-6-5-2-%E7%A4%BA%E4%BE%8B"><span class="toc-number">2.6.5.2.</span> <span class="toc-text">2.6.5.2 示例</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-7-%E5%8A%A8%E6%80%81%E5%86%85%E5%AE%B9"><span class="toc-number">2.7.</span> <span class="toc-text">2.7 动态内容</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-7-1-Watch"><span class="toc-number">2.8.</span> <span class="toc-text">2.7.1 Watch</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-7-2-Star"><span class="toc-number">2.9.</span> <span class="toc-text">2.7.2 Star</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-7-3-Fork"><span class="toc-number">2.10.</span> <span class="toc-text">2.7.3 Fork</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3-%E7%89%B9%E6%AE%8A%E7%AC%A6%E5%8F%B7%E9%97%AE%E9%A2%98"><span class="toc-number">3.</span> <span class="toc-text">3 特殊符号问题</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#3-1-%E7%A9%BA%E6%A0%BC%E7%A4%BA%E4%BE%8B"><span class="toc-number">3.1.</span> <span class="toc-text">3.1 空格示例</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-2-%E7%9F%AD%E6%A8%AA-%E7%AC%A6%E5%8F%B7%E7%A4%BA%E4%BE%8B"><span class="toc-number">3.2.</span> <span class="toc-text">3.2 短横 - 符号示例</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#4-%E5%86%99%E5%9C%A8%E6%9C%80%E5%90%8E"><span class="toc-number">4.</span> <span class="toc-text">4. 写在最后</span></a></li></ol>
    </nav>
  </div>
</aside>

<main class="main" role="main">
  <div class="content">
  <article id="post-awesome-images-in-markdown" class="article article-type-post" itemscope itemtype="http://schema.org/BlogPosting">
    
    <div class="article-header">
      
        
  
    <h1 class="article-title" itemprop="name">
      Markdown中图片的高级用法
    </h1>
  

      
      <div class="article-meta">
        <span class="article-date">
    <i class="icon icon-calendar"></i>
	<a href="/20220228/awesome-images-in-markdown.html" class="article-date">
	  发布于 <time datetime="2022-02-28T15:27:50.000Z" itemprop="datePublished">2022-02-28</time>
	</a>
</span>
<span class="article-date">
    <i class="icon icon-calendar-check"></i>
	<a href="/20220228/awesome-images-in-markdown.html" class="article-date">
	  更新于 <time datetime="2022-03-02T15:28:27.000Z" itemprop="dateUpdated">2022-03-02</time>
	</a>
</span>
        
  <span class="article-category">
    <i class="icon icon-folder"></i>
    <a class="article-category-link" href="/categories/miscellanea/">miscellanea</a>
  </span>

        
  <span class="article-tag">
    <i class="icon icon-tags"></i>
	<a class="article-tag-link-link" href="/tags/miscellanea/" rel="tag">miscellanea</a>
  </span>


        

	<span class="article-read hidden-xs">
    	<i class="icon icon-eye-fill" aria-hidden="true"></i>
    	<span id="/20220228/awesome-images-in-markdown.html" class="leancloud_visitors"  data-flag-title="Markdown中图片的高级用法">
			<span class="leancloud-visitors-count">0</span>
		</span>
    </span>

        <span class="post-comment"><i class="icon icon-comment"></i> <a href="/20220228/awesome-images-in-markdown.html#comments" class="article-comment-link">评论</a></span>
        
	
		<span class="post-wordcount hidden-xs" itemprop="wordCount">字数统计: 2.8k(字)</span>
	
	
		<span class="post-readcount hidden-xs" itemprop="timeRequired">阅读时长: 11(分)</span>
	

      </div>
      <div style="background-color:#D7BDE2;border:1px solid #D7BDE2;border-radius:10px;padding:5px">
          <b>温馨提示</b>：点击页面下方<i style="color:red" class="icon icon-anchor"></i>以展开或折叠目录
      </div>
    </div>
    <div class="article-entry marked-body" itemprop="articleBody">
      
        <blockquote>
<p><font size=5><b>文章说明</b></font><br><strong>文章作者：</strong><a href="https://hwame.top">鴻塵</a><br><strong>文章链接：</strong><a href="https://hwame.top/20220228/awesome-images-in-markdown.html">https://hwame.top/20220228/awesome-images-in-markdown.html</a><br><strong>原文作者：</strong><a target="_blank" rel="noopener" href="https://www.52pojie.cn/home.php?mod=space&amp;uid=555510">吾乃木易先生</a><br><strong>原文链接：</strong><a target="_blank" rel="noopener" href="https://www.52pojie.cn/thread-1522362-1-1.html">https://www.52pojie.cn/thread-1522362-1-1.html</a><br><strong>参考资料：</strong></p>
<ul>
<li><a target="_blank" rel="noopener" href="https://www.52pojie.cn/thread-1522362-1-1.html">庆国诞72周年，分享我帖子中的链接小卡片是怎么做的</a></li>
<li><del>~2.6貌似有问题，style变成前内容了</del>~</li>
<li>【已更正】 <del>~由于此前将Hexo默认CSS修改为图片居中了，故本文显示不太顺眼，可移步原文！</del>~</li>
<li>解决办法：在文章前添加样式即可，<code>!important</code>不会被其他选择器覆盖掉<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">    <span class="selector-tag">img</span> &#123;</span></span><br><span class="line"><span class="language-css">        <span class="attribute">display</span>: inline <span class="meta">!important</span>;</span></span><br><span class="line"><span class="language-css">    &#125;</span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
</blockquote>
<style>
    img {
        display: inline !important;
    }
</style>

<hr>
<blockquote>
<p>之前我分享精品软件的时候用到了链接小卡片，有坛友问我怎么做，虽然我两三言简要回复过了，但没具体说。值此国诞72周年，特来分享。</p>
<p>前排提醒：需要会写基本的 <code>Markdown</code> 语法（当然，如果只想学会链接小卡片的话会写图片和链接的语法就可以了）。如果不会 <code>Markdown</code>，可以参考论坛里的这篇帖子（点击即可传送）： <a target="_blank" rel="noopener" href="https://www.52pojie.cn/thread-1286100-1-1.html"><img src="https://img.shields.io/badge/%5B其他%5DMarkdown从入门到精通-楼主：一只小凡凡-1?colorA=fff&amp;colorB=fff&amp;style=for-the-badge&amp;logo=" alt=""></a></p>
</blockquote>
<h1 id="1-什么是链接小卡片"><a href="#1-什么是链接小卡片" class="headerlink" title="1 什么是链接小卡片"></a>1 什么是链接小卡片</h1><p>这玩意儿实际上叫 <code>badge</code>，翻译过来是徽标的意思。大概是因为我每次用这个都是用作链接，而这玩意儿长得有点像小卡片，所以坛友贴心地起名叫“链接小卡片”。</p>
<p>在论坛中发帖使用请确保使用的是 <code>MD</code> 编辑器，具体使用方法见此贴（点击传送）：<a target="_blank" rel="noopener" href="https://www.52pojie.cn/thread-717627-1-1.html"><img src="https://img.shields.io/badge/【帮助文档】Markdown插件使用说明-楼主：Hmily-1?colorA=fff&amp;colorB=fff&amp;style=for-the-badge&amp;logo=" alt=""></a></p>
<h1 id="2-使用方法"><a href="#2-使用方法" class="headerlink" title="2 使用方法"></a>2 使用方法</h1><p>链接小卡片本质上是借助 <a target="_blank" rel="noopener" href="https://shields.io"><img src="https://img.shields.io/badge/Shields.io-吾乃木易先生?color=222&amp;logo=shieldsdotio" alt=""></a> 这个网站来实现的图片。所以会用到 <code>Markdown</code> 图片语法，如果想做成链接，还需用到 <code>Markdown</code> 链接语法。</p>
<p><strong>所有参数值未加特殊说明均不可省略！</strong></p>
<p><strong>由于是通过其他网站实现显示图片，所以要想正常显示，必须确保有网。</strong></p>
<p><strong>前排提醒：本帖不是广告！此网站是开源、非商业、非盈利性网站，没有任何收费的项目！</strong></p>
<h2 id="2-1-单内容链接小卡片"><a href="#2-1-单内容链接小卡片" class="headerlink" title="2.1 单内容链接小卡片"></a>2.1 单内容链接小卡片</h2><p>我把只有一个内容项的称为 <strong>单内容链接小卡片</strong>。比如我的签名的第一个。</p>
<h3 id="2-1-1-语法"><a href="#2-1-1-语法" class="headerlink" title="2.1.1 语法"></a>2.1.1 语法</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">![](<span class="link">https://img.shields.io/badge/内容-防伪值?color=颜色值</span>)</span><br></pre></td></tr></table></figure>
<h3 id="2-1-2-示例"><a href="#2-1-2-示例" class="headerlink" title="2.1.2 示例"></a>2.1.2 示例</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">![](<span class="link">https://img.shields.io/badge/吾爱破解-吾乃木易先生?color=ff69b4</span>)</span><br></pre></td></tr></table></figure>
<p>效果：<img src="https://img.shields.io/badge/吾爱破解-吾乃木易先生?color=ff69b4" alt=""></p>
<h3 id="2-1-3-注意事项"><a href="#2-1-3-注意事项" class="headerlink" title="2.1.3 注意事项"></a>2.1.3 注意事项</h3><ul>
<li>使用时替换语法代码部分中的汉字内容即可</li>
<li>颜色值可省略（从 <code>?</code> 开始省略）</li>
<li>颜色值均指背景颜色，字体颜色会自动调整，无法自定义字体颜色</li>
<li>颜色值若使用 16 进制，不要加 <code>#</code> 号</li>
<li>默认的颜色是：<img src="https://img.shields.io/badge/绿得发光-吾乃木易先生" alt=""></li>
<li>防伪值只是我是这么叫的，因为它在这里不会显示</li>
<li><strong>只要出现防伪值，防伪值均不可省略，下同</strong></li>
</ul>
<h2 id="2-2-双内容链接小卡片"><a href="#2-2-双内容链接小卡片" class="headerlink" title="2.2 双内容链接小卡片"></a>2.2 双内容链接小卡片</h2><p>我把有两个内容项的称为 <strong>双内容链接小卡片</strong>。</p>
<h3 id="2-2-1-语法"><a href="#2-2-1-语法" class="headerlink" title="2.2.1 语法"></a>2.2.1 语法</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">![](<span class="link">https://img.shields.io/badge/前内容-后内容-后内容颜色值</span>)</span><br></pre></td></tr></table></figure>
<h3 id="2-2-2-示例"><a href="#2-2-2-示例" class="headerlink" title="2.2.2 示例"></a>2.2.2 示例</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">![](<span class="link">https://img.shields.io/badge/52PoJie-吾爱破解-fff</span>)</span><br></pre></td></tr></table></figure>
<p>效果：<img src="https://img.shields.io/badge/52PoJie-吾爱破解-fff" alt=""></p>
<h3 id="2-2-3-注意事项"><a href="#2-2-3-注意事项" class="headerlink" title="2.2.3 注意事项"></a>2.2.3 注意事项</h3><ul>
<li><strong>所有内容均不可省略，包括颜色值</strong></li>
<li>这里的颜色值只能修改后内容的颜色值</li>
</ul>
<h2 id="2-3-图标链接小卡片"><a href="#2-3-图标链接小卡片" class="headerlink" title="2.3 图标链接小卡片"></a>2.3 图标链接小卡片</h2><p>我把带有小图标的称为 <strong>图标链接小卡片</strong>。比如我签名中后面几个。</p>
<p>图标链接小卡片又分为 <strong>内置图标链接小卡片</strong> 和 <strong>自定义图标链接小卡片</strong>。</p>
<h3 id="2-3-1-内置图标链接小卡片"><a href="#2-3-1-内置图标链接小卡片" class="headerlink" title="2.3.1 内置图标链接小卡片"></a>2.3.1 内置图标链接小卡片</h3><p>内置图标可以直接使用。所有内置图标可以在这里找到（点击传送）：<a target="_blank" rel="noopener" href="https://simpleicons.org/"><img src="https://img.shields.io/badge/Simple%20Icons-吾乃木易先生?color=222&amp;logo=simpleicons" alt=""></a></p>
<h4 id="2-3-1-1-语法"><a href="#2-3-1-1-语法" class="headerlink" title="2.3.1.1 语法"></a>2.3.1.1 语法</h4><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="bullet">1.</span> 单内容</span><br><span class="line">![](<span class="link">https://img.shields.io/badge/内容-防伪值?color=颜色&amp;logo=内置图标名</span>)</span><br><span class="line"></span><br><span class="line">;2. 双内容</span><br><span class="line">![](<span class="link">https://img.shields.io/badge/前内容-后内容-后内容颜色值?logo=内置图标名</span>)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h4 id="2-3-1-2-示例"><a href="#2-3-1-2-示例" class="headerlink" title="2.3.1.2 示例"></a>2.3.1.2 示例</h4><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="bullet">1.</span> 单内容</span><br><span class="line">![](<span class="link">https://img.shields.io/badge/QQ-吾乃木易先生?color=4ab7f5&amp;logo=tencentqq</span>)</span><br><span class="line"></span><br><span class="line">;2. 双内容</span><br><span class="line">![](<span class="link">https://img.shields.io/badge/macOS-10.13+-367aff?logo=apple</span>)</span><br></pre></td></tr></table></figure>
<p>效果：</p>
<ol>
<li>单内容：<img src="https://img.shields.io/badge/QQ-吾乃木易先生?color=4ab7f5&amp;logo=tencentqq" alt=""></li>
<li>双内容：<img src="https://img.shields.io/badge/macOS-10.13+-367aff?logo=apple" alt=""></li>
</ol>
<h4 id="2-3-1-3-修改内置图标颜色"><a href="#2-3-1-3-修改内置图标颜色" class="headerlink" title="2.3.1.3 修改内置图标颜色"></a>2.3.1.3 修改内置图标颜色</h4><ul>
<li>部分内置图标默认是白色的，比如上面的示例</li>
<li>部分内置图标默认自带颜色，比如：<img src="https://img.shields.io/badge/WeChat-吾乃木易先生?color=fff&amp;logo=wechat" alt=""> 还有 <img src="https://img.shields.io/badge/AliPay-吾乃木易先生?color=fff&amp;logo=alipay" alt=""></li>
<li>哪些默认带颜色，哪些默认不带，需要自己试</li>
<li>内置图标的颜色可以修改</li>
</ul>
<h5 id="2-3-1-3-1-语法"><a href="#2-3-1-3-1-语法" class="headerlink" title="2.3.1.3.1 语法"></a>2.3.1.3.1 语法</h5><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="bullet">1.</span> 单内容</span><br><span class="line">![](<span class="link">https://img.shields.io/badge/内容-防伪值?color=颜色&amp;logo=内置图标名&amp;logoColor=内置图标颜色值</span>)</span><br><span class="line"></span><br><span class="line">;2. 双内容</span><br><span class="line">![](<span class="link">https://img.shields.io/badge/前内容-后内容-后内容颜色值?logo=内置图标名&amp;logoColor=内置图标颜色值</span>)</span><br></pre></td></tr></table></figure>
<h5 id="2-3-1-3-2-示例"><a href="#2-3-1-3-2-示例" class="headerlink" title="2.3.1.3.2 示例"></a>2.3.1.3.2 示例</h5><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="bullet">1.</span> 单内容</span><br><span class="line">![](<span class="link">https://img.shields.io/badge/QQ-吾乃木易先生?color=fff&amp;logo=tencentqq&amp;logoColor=4ab7f5</span>)</span><br><span class="line"></span><br><span class="line">;2. 双内容</span><br><span class="line">![](<span class="link">https://img.shields.io/badge/macOS-10.13+-367aff?logo=apple&amp;logoColor=f9d694</span>)</span><br></pre></td></tr></table></figure>
<p>效果：</p>
<ol>
<li><img src="https://img.shields.io/badge/QQ-吾乃木易先生?color=fff&amp;logo=tencentqq&amp;logoColor=4ab7f5" alt=""></li>
<li><img src="https://img.shields.io/badge/macOS-10.13+-367aff?logo=apple&amp;logoColor=f9d694" alt=""></li>
</ol>
<h3 id="2-3-2-自定义图标链接小卡片"><a href="#2-3-2-自定义图标链接小卡片" class="headerlink" title="2.3.2 自定义图标链接小卡片"></a>2.3.2 自定义图标链接小卡片</h3><p>自定义图标需将图片转换成 <code>Base64</code> 编码（这样的工具很多，论坛里也有人发过），同时需要原图片的长和宽均 <code>≥ 14px</code>。</p>
<h4 id="2-3-2-1-语法"><a href="#2-3-2-1-语法" class="headerlink" title="2.3.2.1 语法"></a>2.3.2.1 语法</h4><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="bullet">1.</span> 单内容</span><br><span class="line">![](<span class="link">https://img.shields.io/badge/内容-防伪值?color=颜色值&amp;logo=data:image/png;base64,一长串Base64编码</span>)</span><br><span class="line"></span><br><span class="line">;2. 双内容</span><br><span class="line">![](<span class="link">https://img.shields.io/badge/前内容-后内容-防伪值?color=后内容颜色值&amp;logo=data:image/png;base64,一长串Base64编码</span>)</span><br></pre></td></tr></table></figure>
<h4 id="2-3-2-2-示例"><a href="#2-3-2-2-示例" class="headerlink" title="2.3.2.2 示例"></a>2.3.2.2 示例</h4><p>我把论坛的 Logo 转换成了 <code>Base64</code> 编码作为示例，不过编码太长了，放进来严重影响阅读，所以就省略不放了。</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="bullet">1.</span> 单内容</span><br><span class="line">![](<span class="link">https://img.shields.io/badge/吾乃木易先生-吾乃木易?color=fff&amp;logo=...A==</span>)</span><br><span class="line"></span><br><span class="line">;2. 双内容</span><br><span class="line">![](<span class="link">https://img.shields.io/badge/吾爱破解-吾乃木易先生-吾乃木易?color=fff&amp;logo=...A==</span>)</span><br></pre></td></tr></table></figure>
<p>效果：</p>
<ol>
<li><p>单内容：<img src="https://img.shields.io/badge/吾乃木易先生-吾乃木易?color=fff&amp;logo=" alt=""></p>
</li>
<li><p>双内容：<img src="https://img.shields.io/badge/吾爱破解-吾乃木易先生-吾乃木易?color=fff&amp;logo=" alt=""></p>
</li>
</ol>
<h2 id="2-4-双内容自定义颜色"><a href="#2-4-双内容自定义颜色" class="headerlink" title="2.4 双内容自定义颜色"></a>2.4 双内容自定义颜色</h2><p>前面提及双内容链接小卡片的语法和示例中可修改的颜色值都只能修改后内容的颜色。本小节将演示如何分别控制双内容的颜色。</p>
<h3 id="2-4-1-语法"><a href="#2-4-1-语法" class="headerlink" title="2.4.1 语法"></a>2.4.1 语法</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">![](<span class="link">https://img.shields.io/badge/后内容-防伪值?label=前内容&amp;colorA=前内容颜色值&amp;colorB=后内容颜色值</span>)</span><br></pre></td></tr></table></figure>
<h3 id="2-4-2-示例"><a href="#2-4-2-示例" class="headerlink" title="2.4.2 示例"></a>2.4.2 示例</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">![](<span class="link">https://img.shields.io/badge/macOS-吾乃木易先生?label=AppStore&amp;colorA=fff&amp;colorB=367aff&amp;logo=appstore</span>)</span><br></pre></td></tr></table></figure>
<p>效果：<img src="https://img.shields.io/badge/macOS-吾乃木易先生?label=AppStore&amp;colorA=fff&amp;colorB=367aff&amp;logo=appstore" alt=""></p>
<h3 id="2-4-3-注意事项"><a href="#2-4-3-注意事项" class="headerlink" title="2.4.3 注意事项"></a>2.4.3 注意事项</h3><ul>
<li>注意图片语法链接中的“前内容”跑到后面去了，“后内容”跑到前面去了，不要搞反了</li>
<li>如果要加上图标，比如上面的示例，直接在图片语法链接末尾加上 <code>&amp;logo=图标名</code> 即可，注意 <code>&amp;</code> 不要忘了</li>
<li>如果还要修改图标颜色，再继续在链接末尾继续加上 <code>&amp;logoColor=图标颜色值</code> 即可</li>
</ul>
<h2 id="2-5-增加超链接"><a href="#2-5-增加超链接" class="headerlink" title="2.5 增加超链接"></a>2.5 增加超链接</h2><p>我的软件分享贴的链接小卡片是可以点的，本帖当中的部分也是，这是因为在 <code>Markdown</code> 图片语法外层又套娃了一层超链接语法。</p>
<h3 id="2-5-1-语法"><a href="#2-5-1-语法" class="headerlink" title="2.5.1 语法"></a>2.5.1 语法</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="string">链接小卡片图片显示</span>](<span class="link">超链接地址</span>)</span><br></pre></td></tr></table></figure>
<h3 id="2-5-2-示例"><a href="#2-5-2-示例" class="headerlink" title="2.5.2 示例"></a>2.5.2 示例</h3><p>就是把 <code>2.1</code> ~ <code>2.4</code> 学到的放在超链接语法的 <code>[]</code> 里就行。</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="string">![</span>](<span class="link">https://img.shields.io/badge/吾爱破解-吾乃木易先生?color=fff&amp;logo=...A==</span>)](<span class="link">https://www.52pojie.cn/</span>)</span><br></pre></td></tr></table></figure>
<p>效果：<br><img src="https://img.shields.io/badge/吾爱破解-吾乃木易先生?color=fff&amp;logo=" alt=""></p>
<p>其他的可以自行尝试。</p>
<h2 id="2-6-样式"><a href="#2-6-样式" class="headerlink" title="2.6 样式"></a>2.6 样式</h2><p>有五种样式可供选择。</p>
<h3 id="2-6-1-默认"><a href="#2-6-1-默认" class="headerlink" title="2.6.1 默认"></a>2.6.1 默认</h3><p>默认就是这种带立体感的圆角矩形样式。</p>
<p>示例：</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">![](<span class="link">https://img.shields.io/badge/style=plastic-吾乃木易先生?label=Git&amp;colorA=fff&amp;colorB=f14d28&amp;logo=git</span>)</span><br></pre></td></tr></table></figure>
<p>效果：<img src="https://img.shields.io/badge/style=plastic-吾乃木易先生?label=Git&amp;colorA=fff&amp;colorB=f14d28&amp;logo=git" alt=""></p>
<blockquote>
<p>默认实际上就是 <code>&amp;style=plastic</code>。</p>
</blockquote>
<h3 id="2-6-2-扁平圆角矩形"><a href="#2-6-2-扁平圆角矩形" class="headerlink" title="2.6.2 扁平圆角矩形"></a>2.6.2 扁平圆角矩形</h3><h4 id="2-6-2-1-语法"><a href="#2-6-2-1-语法" class="headerlink" title="2.6.2.1 语法"></a>2.6.2.1 语法</h4><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&amp;style=flat</span><br></pre></td></tr></table></figure>
<h4 id="2-6-2-2-示例"><a href="#2-6-2-2-示例" class="headerlink" title="2.6.2.2 示例"></a>2.6.2.2 示例</h4><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">![](<span class="link">https://img.shields.io/badge/style=flat-吾乃木易先生?label=Git&amp;colorA=fff&amp;colorB=f14d28&amp;logo=git&amp;style=flat</span>)</span><br></pre></td></tr></table></figure>
<p>效果：<img src="https://img.shields.io/badge/style%20=%20flat-吾乃木易先生?label=Git&amp;colorA=fff&amp;colorB=f14d28&amp;logo=git&amp;style=flat" alt=""></p>
<h3 id="2-6-3-扁平直角矩形"><a href="#2-6-3-扁平直角矩形" class="headerlink" title="2.6.3 扁平直角矩形"></a>2.6.3 扁平直角矩形</h3><h4 id="2-6-3-1-语法"><a href="#2-6-3-1-语法" class="headerlink" title="2.6.3.1 语法"></a>2.6.3.1 语法</h4><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&amp;style=flat-square</span><br></pre></td></tr></table></figure>
<h4 id="2-6-3-2-示例"><a href="#2-6-3-2-示例" class="headerlink" title="2.6.3.2 示例"></a>2.6.3.2 示例</h4><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">![](<span class="link">https://img.shields.io/badge/style=flat--square-吾乃木易先生?label=Git&amp;colorA=fff&amp;colorB=f14d28&amp;logo=git&amp;style=flat-square</span>)</span><br></pre></td></tr></table></figure>
<p>效果：<img src="https://img.shields.io/badge/style%20=%20flat--square-吾乃木易先生?label=Git&amp;colorA=fff&amp;colorB=f14d28&amp;logo=git&amp;style=flat-square" alt=""></p>
<h3 id="2-6-4-大扁平圆角矩形-字母全大写"><a href="#2-6-4-大扁平圆角矩形-字母全大写" class="headerlink" title="2.6.4 大扁平圆角矩形 - 字母全大写"></a>2.6.4 大扁平圆角矩形 - 字母全大写</h3><h4 id="2-6-4-1-语法"><a href="#2-6-4-1-语法" class="headerlink" title="2.6.4.1 语法"></a>2.6.4.1 语法</h4><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&amp;style=for-the-badge</span><br></pre></td></tr></table></figure>
<h4 id="2-6-4-2-示例"><a href="#2-6-4-2-示例" class="headerlink" title="2.6.4.2 示例"></a>2.6.4.2 示例</h4><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">![](<span class="link">https://img.shields.io/badge/style=for--the--badge-吾乃木易先生?label=Git&amp;colorA=fff&amp;colorB=f14d28&amp;logo=git&amp;style=for-the-badge</span>)</span><br></pre></td></tr></table></figure>
<p>效果：<img src="https://img.shields.io/badge/style%20=%20for--the--badge-吾乃木易先生?label=Git&amp;colorA=fff&amp;colorB=f14d28&amp;logo=git&amp;style=for-the-badge" alt=""></p>
<h3 id="2-6-5-GitHub-交流样式"><a href="#2-6-5-GitHub-交流样式" class="headerlink" title="2.6.5 GitHub 交流样式"></a>2.6.5 GitHub 交流样式</h3><h4 id="2-6-5-1-语法"><a href="#2-6-5-1-语法" class="headerlink" title="2.6.5.1 语法"></a>2.6.5.1 语法</h4><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&amp;style=social</span><br></pre></td></tr></table></figure>
<h4 id="2-6-5-2-示例"><a href="#2-6-5-2-示例" class="headerlink" title="2.6.5.2 示例"></a>2.6.5.2 示例</h4><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">![](<span class="link">https://img.shields.io/badge/style=social-吾乃木易先生?label=Git&amp;colorA=fff&amp;colorB=f14d28&amp;logo=git&amp;style=social</span>)</span><br></pre></td></tr></table></figure>
<p>效果：<img src="https://img.shields.io/badge/style%20=%20social-吾乃木易先生?label=Git&amp;colorA=fff&amp;colorB=f14d28&amp;logo=git&amp;style=social" alt=""></p>
<h2 id="2-7-动态内容"><a href="#2-7-动态内容" class="headerlink" title="2.7 动态内容"></a>2.7 动态内容</h2><p>动态内容即显示的内容为可变的，主要用于 GitHub 等网站的某些数据显示。</p>
<p>这里的动态内容只介绍与 GitHub 相关的一部分，想了解更多可以去官网查询。</p>
<p>以 Linux 之父林纳斯·托瓦斯的 Linux 源代码仓库 <code>torvalds/linux</code> 为示例。</p>
<h2 id="2-7-1-Watch"><a href="#2-7-1-Watch" class="headerlink" title="2.7.1 Watch"></a>2.7.1 Watch</h2><p>语法：</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">![](<span class="link">https://img.shields.io/github/watchers/用户名/仓库名?style=social&amp;label=Watch</span>)</span><br></pre></td></tr></table></figure>
<p>示例：</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">![](<span class="link">https://img.shields.io/github/watchers/torvalds/linux?style=social&amp;label=Watch</span>)</span><br></pre></td></tr></table></figure>
<p>效果：<img src="https://img.shields.io/github/watchers/torvalds/linux?style=social&amp;label=Watch" alt=""></p>
<h2 id="2-7-2-Star"><a href="#2-7-2-Star" class="headerlink" title="2.7.2 Star"></a>2.7.2 Star</h2><p>语法：</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">![](<span class="link">https://img.shields.io/github/stars/用户名/仓库名?style=social</span>)</span><br></pre></td></tr></table></figure>
<p>示例：</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">![](<span class="link">https://img.shields.io/github/stars/torvalds/linux?style=social&amp;label=star</span>)</span><br></pre></td></tr></table></figure>
<p>效果：<img src="https://img.shields.io/github/stars/torvalds/linux?style=social&amp;label=star" alt=""></p>
<h2 id="2-7-3-Fork"><a href="#2-7-3-Fork" class="headerlink" title="2.7.3 Fork"></a>2.7.3 Fork</h2><p>语法：</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">![](<span class="link">https://img.shields.io/github/forks/用户名/仓库名?style=social&amp;label=Fork</span>)</span><br></pre></td></tr></table></figure>
<p>示例：</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">![](<span class="link">https://img.shields.io/github/forks/torvalds/linux?style=social&amp;label=Fork</span>)</span><br></pre></td></tr></table></figure>
<p>效果：<img src="https://img.shields.io/github/forks/torvalds/linux?style=social&amp;label=Fork" alt=""></p>
<p>其他的可以自行尝试。</p>
<h1 id="3-特殊符号问题"><a href="#3-特殊符号问题" class="headerlink" title="3 特殊符号问题"></a>3 特殊符号问题</h1><p>有时候需要空格或者其他的特殊符号，直接打在链接里可能会导致结果不符合预期。</p>
<p>解决方法其实很简单，就是把特殊符号转换成 <code>url</code> 编码即可。</p>
<h2 id="3-1-空格示例"><a href="#3-1-空格示例" class="headerlink" title="3.1 空格示例"></a>3.1 空格示例</h2><p>之前 App Store 那个示例中是没有空格的，现在添加空格（空格的 <code>url</code> 编码是 <code>%20</code> ）：</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">![](<span class="link">https://img.shields.io/badge/macOS-吾乃木易先生?label=App%20Store&amp;colorA=fff&amp;colorB=367aff&amp;logo=appstore</span>)</span><br></pre></td></tr></table></figure>
<p>效果：<img src="https://img.shields.io/badge/macOS-吾乃木易先生?label=App%20Store&amp;colorA=fff&amp;colorB=367aff&amp;logo=appstore" alt=""></p>
<h2 id="3-2-短横-符号示例"><a href="#3-2-短横-符号示例" class="headerlink" title="3.2 短横 - 符号示例"></a>3.2 短横 <code>-</code> 符号示例</h2><p>短横符号 <code>-</code> 比较特殊，它没有 <code>url</code> 编码，或者说它的 <code>url</code> 编码就是它本身。 要想在小卡片中显示它也很简单，写两遍就行。</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">![](<span class="link">https://img.shields.io/badge/-everything--is--local-吾乃木易先生?label=git&amp;colorA=fff&amp;colorB=f14d28&amp;logo=git</span>)</span><br></pre></td></tr></table></figure>
<p>效果：<img src="https://img.shields.io/badge/-everything--is--local-吾乃木易先生?label=git&amp;colorA=fff&amp;colorB=f14d28&amp;logo=git" alt=""></p>
<h1 id="4-写在最后"><a href="#4-写在最后" class="headerlink" title="4. 写在最后"></a>4. 写在最后</h1><p>本帖内容的 <code>.md</code> 源文件也一并分享给大家，任何一款 Markdown 编辑器均支持以上所有操作和显示相关内容。</p>
<blockquote>
<p>纸上得来终觉浅，绝知此事要躬行。——陆游《冬夜读书示子聿》</p>
</blockquote>
<p>看和听再多，也比不上自己动手试一遍。学习这件事儿，眼睛和耳朵告诉脑子会了，也要脑子能指挥手会才行。</p>
<p>祝各位学习愉快，技术大成！<br>祝祖国繁荣昌盛，国泰民安！</p>
<p><img src="https://img.shields.io/badge/热烈庆祝中华人民共和国成立72周年！-吾乃木易先生?color=fff&amp;logo=&amp;style=for-the-badge" alt=""></p>
<blockquote>
<p>此国旗图案来源于中国政府网的“网络使用的国旗图案标准版本”，使用符合《中华人民共和国国旗法》。</p>
</blockquote>

      
    </div>
    <div class="article-footer">
      <blockquote class="mt-2x">
  <ul class="post-copyright list-unstyled">
    <li class="post-copyright-license">
      <strong>文章作者： </strong><a href="https://hwame.top" style="color:#E541E5;"> 鴻塵</a>
    </li>
    
    <li class="post-copyright-link hidden-xs">
      <strong>本文链接：</strong>
      <a href="https://hwame.top/20220228/awesome-images-in-markdown.html" title="Markdown中图片的高级用法" target="_blank" rel="external" style="color:#E541E5;">https://hwame.top/20220228/awesome-images-in-markdown.html</a>
    </li>
    
    <li class="post-copyright-license">
      <strong>版权声明： </strong> 本博客所有文章除特别声明外，均采用《<a href="http://creativecommons.org/licenses/by/4.0/deed.zh" target="_blank" rel="external" style="color:#E541E5;"><u>CC BY 4.0 CN协议</u></a>》许可协议。转载请注明出处！
    </li>
  </ul>
</blockquote>


<div class="panel panel-default panel-badger">
  <div class="panel-body">
    <figure class="media">
      <div class="media-left">
        <a href="https://hwame.top" target="_blank" class="img-burn thumb-sm visible-lg">
          <img src="https://cdn.jsdelivr.net/gh/hwame/pics@main/avatar.jpg" class="img-rounded w-full" alt="">
        </a>
      </div>
      <div class="media-body">
        <h3 class="media-heading"><a href="https://hwame.top" target="_blank"><span class="text-dark">鴻塵</span><small class="ml-1x">Pythoner, Data Analyst</small></a></h3>
        <div>个人简介：处女座不适合做码农。</div>
      </div>
    </figure>
  </div>
</div>


    </div>
  </article>
  
    
  <section id="comments">
  	
      <div id="vcomments"></div>
    
  </section>


  
</div>

  <nav class="bar bar-footer clearfix" data-stick-bottom>
  <div class="bar-inner">
  
  <ul class="pager pull-left">
    
    <li class="prev">
      <a href="/20220323/when-to-use-pointer-in-go.html" title="Go语言什么时候使用指针"><i class="icon icon-angle-left" aria-hidden="true"></i><span>&nbsp;&nbsp;上一篇</span></a>
    </li>
    
    
    <li class="next">
      <a href="/20220116/shell-regular-expression.html" title="Shell正则表达式"><span>下一篇&nbsp;&nbsp;</span><i class="icon icon-angle-right" aria-hidden="true"></i></a>
    </li>
    
    
    <li class="toggle-toc">
      <a class="toggle-btn collapsed" data-toggle="collapse" href="#collapseToc" aria-expanded="false" title="文章目录" role="button">
        <span style="color:#C71585">[&nbsp;</span><span style="color:#C71585">文章目录</span>
        <i class="text-collapsed icon icon-anchor"></i>
        <i class="text-in icon icon-close"></i>
        <span style="color:#C71585">]</span>
      </a>
    </li>
    
  </ul>
  
  
  
  <div class="bar-right">
    
    <div class="share-component" data-sites="weibo,qq,wechat,facebook,twitter" data-mobile-sites="weibo,wechat,qq,qzone"></div>
    
  </div>
  </div>
</nav>
  


</main>

  <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<footer class="footer" itemscope itemtype="http://schema.org/WPFooter">
	
	
    <ul class="social-links">
    	
        <li><a href="https://github.com/hwame" target="_blank" title="Github" data-toggle=tooltip data-placement=top><i class="icon icon-github"></i></a></li>
        
        <li><a href="https://weibo.com/hwamei" target="_blank" title="Weibo" data-toggle=tooltip data-placement=top><i class="icon icon-weibo"></i></a></li>
        
        <li><a href="https://www.zhihu.com/people/hwame" target="_blank" title="Zhihu" data-toggle=tooltip data-placement=top><i class="icon icon-zhihu"></i></a></li>
        
        <li><a href="https://segmentfault.com/u/hwame" target="_blank" title="Segmentfault" data-toggle=tooltip data-placement=top><i class="icon icon-segmentfault"></i></a></li>
        
        <li><a href="https://gitee.com/hwame" target="_blank" title="Gitee" data-toggle=tooltip data-placement=top><i class="icon icon-gitee"></i></a></li>
        
        <li><a href="/atom.xml" target="_blank" title="Rss" data-toggle=tooltip data-placement=top><i class="icon icon-rss"></i></a></li>
        
    </ul>

    <div class="copyright">
    	
        &copy; 2025 鴻塵
        
        
        <div class="publishby" style="font-family:Courier">
            <span id="busuanzi_container_site_pv">
                <i class="icon icon-eye"></i><span id="busuanzi_value_site_pv" style="font-family:Courier"></span>&nbsp;
                <i class="icon icon-users"></i><span id="busuanzi_value_site_uv" style="font-family:Courier"></span>
            </span>
            <!--
            <br>✯<a target="_blank" rel="noopener" href="https://beian.miit.gov.cn/" style="color:#0FFFAA">鄂ICP备2020019329号</a>
            -->
            <br><i class="icon icon-clock" style="transform:rotate(90deg)"></i><span id="sitetime" style="font-family:Courier"></span>
        </div>
        
        <!--
        <div class="publishby">
        	Theme by <a href="https://github.com/cofess" target="_blank"> cofess </a>base on <a href="https://github.com/cofess/hexo-theme-pure" target="_blank">pure</a>.
        </div>
        -->
    </div>
    
</footer>
<script>
    function siteTime(){
        window.setTimeout("siteTime()", 1000);
        var seconds = 1000;
        var minutes = seconds * 60;
        var hours = minutes * 60;
        var days = hours * 24;
        var years = days * 365;
        var today = new Date();
        var todayYear = today.getFullYear();
        var todayMonth = today.getMonth()+1;
        var todayDate = today.getDate();
        var todayHour = today.getHours();
        var todayMinute = today.getMinutes();
        var todaySecond = today.getSeconds();
        /* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
        year - 作为date对象的年份，为4位年份值
        month - 0-11之间的整数，做为date对象的月份
        day - 1-31之间的整数，做为date对象的天数
        hours - 0(午夜24点)-23之间的整数，做为date对象的小时数
        minutes - 0-59之间的整数，做为date对象的分钟数
        seconds - 0-59之间的整数，做为date对象的秒数
        microseconds - 0-999之间的整数，做为date对象的毫秒数 */
        var t1 = Date.UTC(2020,05,19,21,20,52); //建站时间
        var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
        var diff = t2-t1;
        var diffYears = Math.floor(diff/years);
        var diffDays = Math.floor((diff/days)-diffYears*365);
        var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
        var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
        var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
        // 将「数字」转「补零字符串」
        var y = diffYears.toString()
        var d = diffDays.toString().padStart(3, '0')
        var h = diffHours.toString().padStart(2, '0')
        var m = diffMinutes.toString().padStart(2, '0')
        var s = diffSeconds.toString().padStart(2, '0')
        document.getElementById("sitetime").innerHTML=y+":"+d+":"+h+":"+m+":"+s;
    }
    siteTime();
</script>
  <script src="//cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>
<div id="go-top"></div>
<style type="text/css">
#go-top {
 width:40px;height:40px;
 background-color:#DDA0DD;
 position:relative;
 border-radius:20px;
 position:fixed;right:20px;bottom:50px;
 cursor:pointer;display:none;
}
#go-top:after {
 content:" ";
 position:absolute;left:14px;top:14px;
 border-top:2px solid #fff;border-right:2px solid #fff;
 width:12px;height:12px;
 transform:rotate(-45deg);
}
#go-top:hover {
 background-color:#8A2BE2;
}
</style>
<script>
$(function () {
  var top=$("#go-top");
  $(window).scroll(function () {
    ($(window).scrollTop() > 300) ? top.show(300) : top.hide(200);
    $("#go-top").click(function () {
      $('body,html').animate({scrollTop:0});
      return false();
    })
  });
});
</script>

<script src="/js/plugin.min.js"></script>


<script src="/js/application.js"></script>


    <script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
            UNTITLED: '(未命名)',
        },
        ROOT_URL: '/',
        CONTENT_URL: '/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>

<script src="/js/insight.js"></script>





   




   
    

  <script src='/waline.js'></script>
  <link rel="stylesheet" type="text/css" href="/waline.css" />
  
  <script type="text/javascript">
 
  
Waline.init({
      el: '#vcomments',
      serverURL: 'https://waline.hwame.top',
});
  </script>

     


<!-- 20201211添加判断 -->

   
  <script src="//cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js"></script>
  <script>
  //利用 FancyBox 实现点击图片放大
  $(document).ready(function() {
    $('article img').not('[hidden]').not('.panel-body img').each(function() {
      var $image = $(this);
      var imageCaption = $image.attr('alt');
      var $imageWrapLink = $image.parent('a');
      if ($imageWrapLink.length < 1) {
        var src = this.getAttribute('src');
        var idx = src.lastIndexOf('?');
        if (idx != -1) {
          src = src.substring(0, idx);
        }
        $imageWrapLink = $image.wrap('<a href="' + src + '"></a>').parent('a');
      }
      $imageWrapLink.attr('data-fancybox', 'images');
      if (imageCaption) {
        $imageWrapLink.attr('data-caption', imageCaption);
      }
    });
    $().fancybox({
      selector: '[data-fancybox="images"]',
      hash: false,
      loop: true,
    });
  });
  </script>







  
  <style>
    .copy-btn {
      display: inline-block;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 700;
      line-height: 20px;
      color: #333;
      white-space: nowrap;
      vertical-align: middle;
      cursor: pointer;
      background-color: #eee;
      background-image: linear-gradient(#fcfcfc, #eee);
      border: 1px solid #d5d5d5;
      border-radius: 3px;
      user-select: none;
      outline: 0;
    }

    .highlight-wrap .copy-btn {
      transition: opacity .3s ease-in-out;
      opacity: 0;
      padding: 2px 6px;
      position: absolute;
      right: 4px;
      top: 8px;
      z-index: 2;
    }

    .highlight-wrap:hover .copy-btn,
        .highlight-wrap .copy-btn:focus {
      opacity: 1
    }

    .highlight-wrap {
      position: relative;
    }
  </style>
  
  <script>
    addLoadEvent(()=>{
      $('.highlight').each(function (i, e) {
        var $wrap = $('<div>').addClass('highlight-wrap')
        $(e).after($wrap)
        $wrap.append($('<button>').addClass('copy-btn').append('一键复制').on('click', function (e) {
          var code = $(this).parent().find(".code")[0].innerText
          
          var ta = document.createElement('textarea')
          document.body.appendChild(ta)
          ta.style.position = 'absolute'
          ta.style.top = '0px'
          ta.style.left = '0px'
          ta.value = code
          ta.select()
          ta.focus()
          var result = document.execCommand('copy')
          document.body.removeChild(ta)
          
            if(result)$(this).text('复制成功')
            else $(this).text('复制失败')
          
          $(this).blur()
        })).on('mouseleave', function (e) {
          var $b = $(this).find('.copy-btn')
          setTimeout(function () {
            $b.text('一键复制')
          }, 300)
        }).append(e)
      })
    })
  </script>

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: {
            inlineMath: [ ["$","$"], ["\\(","\\)"] ],
            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'],
            processEscapes: true
        }
    });
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax();
        for (var i = 0; i < all.length; ++i)
            all[i].SourceElement().parentNode.className += ' has-jax';
    });
</script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</body>
</html>